<template>
    <div>
        <!-- 卡片一：扫二维码 -->
        <div class="card bg-light mt-3">
            <div class="card-body d-flex">
                <img :src="param.weixin_url" width="120px" alt="">
                <div class="ms-5">
                    <p>&bull; 扫二维码</p>
                    <p>&bull; 免费资料领取</p>
                    <p class="fw-bolder">&bull; 扫码领取更多惊喜</p>
                </div>
            </div>
        </div>

        <!-- 卡片二：联系方式 -->
        <div class="card bg-light mt-3">
            <div class="card-body">
                <h5>社交</h5>
                <hr />
                <p>QQ: {{param.qq}}</p>
                <p>邮箱: {{param.email}}</p>
            </div>
        </div>

        <!-- 广告图 -->
        <img class="mt-3" :src="param.ad_url" alt="" style="height: 130px; width: 100%;">

        <!-- 卡片三：文章分类 -->
        <div class="card bg-light mt-3">
            <div class="card-body">
                <h5>分类</h5>
                <hr />
                <p v-for="item in articleCategory">
                    <a href="#" class="card-link text-decoration-none text-primary">
                      {{item.categoryName}}<span style="color: gray">({{item.articleCount}})</span>
                    </a>
                </p>
            </div>
        </div>

        <!-- 卡片四：归档 -->
        <div class="card bg-light mt-3">
            <div class="card-body">
                <h5>归档</h5>
                <hr />
                <p v-for="t in pigeonholeCount">
                    <a href="#" class="card-link text-decoration-none text-primary">
                      {{t.categoryDate}} <span style="color: gray">({{t.categoryCount}})</span>
                    </a>
                </p>
            </div>
        </div>
    </div>
</template>

<script>
module.exports = {
    data() {
      return{
        articleCategory:[],
        pigeonholeCount:[],
        param:'',

      }
    },
    methods: {
      //获取文章分类和数量
      getArticleCategory(){
        this.$http.get('/articleType/articleCategory').then(res => {
          this.articleCategory= res.data.data;
        })
      },
      //获取文章归档数量
      pigCount(){
        this.$http.get('/articleType/pigeonholeCount').then(res => {
          this.pigeonholeCount= res.data.data;
        })
      },
      //获取信息栏
      getParam(){
        this.$http.get('/param').then(res => {
          this.param= res.data.data;
        })
      },
    },
    mounted() {
      //获取文章归档数量
      this.pigCount();
      //获取文章分类和数量
      this.getArticleCategory();
      //获取信息栏
      this.getParam();
    },
}
</script>

<style></style>